<template>
  <div class="main">
    <header class="header">
      <a-icon class='iconToggled' @click="toggleCollapsed" :type="collapsed ? 'menu-unfold' : 'menu-fold'"></a-icon>
      <a-dropdown>
        <span class="ant-dropdown-link">
          <a-avatar size="small" icon="user"></a-avatar>
          <span class="username">{{username}}</span>
          <a-icon type="down" />
        </span>
        <a-menu slot="overlay">
          <a-menu-item @click.native="logoutClick">
            <a-icon type="logout" /><span>退出</span>
          </a-menu-item>
        </a-menu>

      </a-dropdown>
    </header>
    <div class="content">
        <router-view />
    </div>
  </div>
</template>
<script>
import Cookies from 'cookies-js'
export default {
  name: 'Main',
  data: () => ({
    username: Cookies.get('username')
  }),
  computed: {
    collapsed () {
      return this.$store.state.collapsed
    }
  },
  methods: {
    toggleCollapsed () {
      this.$store.dispatch('collapsedAction', {
        collapsed: !this.$store.state.collapsed
      })
    },
    async logoutClick () {
      alert('hhh')
      this.$router.push('/')
    }
  }
}
</script>
<style lang="less">
.main {
  // display: flex;
  flex: 1;
  .header {
    height: 64px;
    padding: 0 40px 0 20px;
    background: white;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .iconToggled {
      font-size: 24px;
    }
  }
  .username {
    padding-right: 6px;
  }
}
</style>
